<template>
    <up-tabbar :fixed="true" :placeholder="true" :safeAreaInsetBottom="true">
        <up-tabbar-item
            v-if="props.haveLeft"
            :text="props.leftText"
            name="left"
            @click="onClick"
        ></up-tabbar-item>
        <up-tabbar-item
            :text="props.rightText"
            name="right"
            @click="onClick"
        ></up-tabbar-item>
    </up-tabbar>
</template>

<script setup>
import { ref, reactive } from 'vue';

const props = defineProps({
    haveLeft: { type: Boolean, default: true },
    leftText: { type: String, default: '上一步' },
    rightText: { type: String, default: '下一步' },
});
console.log(props, '22');

const emits = defineEmits(['leftClick', 'rightClick']);
const onClick = (e) => {
    switch (e) {
        case 'left':
            emits('leftClick');
            break;
        case 'right':
            emits('rightClick');
            break;
    }
};
</script>

<style lang="scss"></style>
